* {
  margin: 0;
  padding: 0;
}

@w: 800;
@gutter: 20;
@primary-color: rgb(14, 90, 128);

.wrapper {
  width: @w * 1px;
  min-height: 200px;
  border: solid 1px @primary-color;
  margin: 0 auto;

  // 顶部结构
  .top{
    height: 120px;
    background: rgb(141, 195, 223);

    &:hover{
      background-color: hsl(0, 45%, 58%);
    }

    @media screen and (min-width: 800px) and (max-width: 1000px) {
      background: rgb(206, 209, 30);
    }

    @media screen and (min-width: 1000px) and (max-width: 1200px) {
      background: rgb(145, 32, 211);
    }

  }

  //内容区
  .content{
    padding-top: @gutter + 0px;
    // 左侧结构
    .left{
      width: 200px;
      height: 350px;
      background: rgb(165, 152, 182);
      float: left;
    }

    //右侧结构
    .right{
      float: right;
      width: @w - 200 - @gutter * 1px;
      height: 500px;
      background-color: rgb(202, 182, 128);
    }

    // &  表示父级的选择器  .wrapper .content
    &::after{
      content: '';
      display: block;
      clear: both;
    }
  }

  

}

// @media screen and (min-width: 800px) and (max-width: 1000px) {
//   .wrapper .top{
//     background: rgb(197, 32, 32);
//   }
// }

// @media screen and (min-width: 1000px) and (max-width: 1200px) {
//   .wrapper .top{
//     background: rgb(65, 192, 33);
//   }
// }